Ext.onReady(function(){
	
	// create the Data Store
    var ds = new Ext.data.Store({
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.ScriptTagProxy({
            url: 'account.rail'
        }),

        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'accounts'
        }, [
            {name: 'account_name', mapping: 'accountname'},
            {name: 'account_pass', mapping: 'accountpass'}
        ]),

        // turn on remote sorting
        remoteSort: true
    });
    ds.setDefaultSort('account_name', 'desc');


	// shorthand alias
    var fm = Ext.form, Ed = Ext.grid.GridEditor;
    
    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var cm = new Ext.grid.ColumnModel([{
           header: "AccountName",
           dataIndex: 'account_name',
           width: 100
        },{
           header: "AccountPass",
           dataIndex: 'account_pass',
           width: 100,
           editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    // create the editor grid
    var grid = new Ext.grid.EditorGrid('topic-grid', {
        ds: ds,
        cm: cm,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
        enableColLock: false
    });
    
    var responseSuccess = function(o) {
		alert(o.responseText);
	}
	
	var responseFailure = function(o) {
		alert(o.statusText);
	}
	
	var callback = {
		success: responseSuccess,
		failure: responseFailure
	};
    
    grid.on("afteredit", 
    	function(e){
    		var params = { accountname: e.record.data["account_name"], accountpass: e.record.data["account_pass"] };
    		Ext.lib.Ajax.request('POST', "updateaccount.rail", callback, params);
        }
    );

    // make the grid resizable, do before render for better performance
    var rz = new Ext.Resizable('topic-grid', {
        wrap:true,
        minHeight:100,
        pinned:true,
        handles: 's'
    });
    rz.on('resize', grid.autoSize, grid);

    // render it
    grid.render();

    var gridFoot = grid.getView().getFooterPanel(true);

    // trigger the data store load
    ds.load({params:{start:0, limit:25}});

});
